<template>
    <div class="echarts" ref="echart2" style="width:560px;height: 500px;"></div>
</template>

<script>
import {getCurrentInstance, onMounted, ref, watch, defineEmits, reactive, toRefs} from "vue";

export default {
  props:['dataSource'],
  setup(){
    const { proxy } = getCurrentInstance();
    //监视数据变化后重新进行绘图
    watch(proxy.$props,()=>{
      console.log('echart2执行 dataSource',proxy.$props.dataSource)
      option.series[0].data=[]
      option.series[0].links=[]//初始化
      let id = 0
      let snv = proxy.$props.dataSource.snv
      let cpgs = proxy.$props.dataSource.cpgs===''? [] : proxy.$props.dataSource.cpgs.split(',')
      let Proximal = proxy.$props.dataSource.Proximal===''? [] : proxy.$props.dataSource.Proximal.split(',')
      let interaction = proxy.$props.dataSource.interaction===''? [] : proxy.$props.dataSource.interaction.split(',')
      let eQTL = proxy.$props.dataSource.eQTL===''? [] : proxy.$props.dataSource.eQTL.split(',')
      let CpgTarget = proxy.$props.dataSource.CpgTarget===''? [] : proxy.$props.dataSource.CpgTarget.split(',')
      let cpgsAndCpgTargetLinks = proxy.$props.dataSource.cpgLinks
      option.series[0].data.push({id: id,name: snv,category: 0,fixed:true,x:200,y:250})
      for (let i = 0; i < cpgs.length; i++) {
        id = id + 1
        option.series[0].data.push({id: id,name: cpgs[i],category: 1})
        option.series[0].links.push({source:'0',target:id.toString()})
      }
      for (let i = 0; i < Proximal.length; i++) {
        id = id + 1
        option.series[0].data.push({id: id,name: Proximal[i],category: 2})
        option.series[0].links.push({source:'0',target:id.toString()})
      }
      for (let i = 0; i < interaction.length; i++) {
        id = id + 1
        option.series[0].data.push({id: id,name: interaction[i],category: 3})
        option.series[0].links.push({source:'0',target:id.toString()})
      }
      for (let i = 0; i < eQTL.length; i++) {
        id = id + 1
        option.series[0].data.push({id: id,name: eQTL[i],category: 4})
        option.series[0].links.push({source:'0',target:id.toString()})
      }
      for (let i = 0; i < CpgTarget.length; i++) {
        id = id + 1
        option.series[0].data.push({id: id,name: CpgTarget[i],category: 5})
      }
      for (let i = 0; i < cpgsAndCpgTargetLinks.length; i++) {
        let cpgid = 0;let targetid = 0;
        for (let j = 0; j < option.series[0].data.length; j++) {
          if (cpgsAndCpgTargetLinks[i].cpg === option.series[0].data[j].name){
            cpgid = option.series[0].data[j].id
          }
          if (cpgsAndCpgTargetLinks[i].gene === option.series[0].data[j].name){
            targetid = option.series[0].data[j].id
          }
        }
        option.series[0].links.push({source:cpgid,target:targetid})
      }
      console.log('echart2执行',option.series[0].links,option.series[0].data)
      rendeChart()
    })
    const option = reactive({
      toolbox:{
        show:true
      },
      symbolKeepAspect:true,
      backgroundColor: '#ffffff',
      color: [
        '#33a02c',
        '#d6604d',
        '#80b1d3',
        '#e89a8d',
        '#64abf5',
        '#e8e68d',
      ],
      title: {
        text: '',
        textStyle: {
          color: '#368cbf',
          fontWeight: 700,
          fontSize: 30,
          left: 'center'
        }
      }, // 标题及标题颜色、尺寸、位置
      legend: [ // 增加图示标签，我们可以点击图示隐藏相关节点
        {
          x: 'center',
          show: true,
          data: [
            'Index SNV',
            'ASM CpGs',
            'Proximal genes',
            '3D interaction genes',
            'eQTL genes',
            'CpG target genes',
          ]
        }],
      series: [
        {
          type: 'graph', // 类型设置为关系图
          legendHoverLink: true,  // 可以点击图例来隐藏一个组
          layout: 'force',
          categories: [
            { name: 'Index SNV', symbolSize: 60 },
            { name: 'ASM CpGs', symbolSize: 60 },
            { name: 'Proximal genes', symbolSize: 60 },
            { name: '3D interaction genes', symbolSize: 60 },
            { name: 'eQTL genes', symbolSize: 60 },
            { name: 'CpG target genes', symbolSize: 60 },
          ],
          force: {
            repulsion: [500, 600], //每个节点之间的斥力因子，越大离的越远
            layoutAnimation: true,
            friction: 0.05, //刷新时节点的移动速度，越大越快，0 - 1 之间
            edgeLength: [150, 180] //两节点之间的距离
          },
          label: {
            show: true, // 节点圆盘上的文字
            fontStyle: 'italic', //文字风格，normal，italic，oblique 三种可选
            fontSize: 12,
            color: '#000000',
          },
          symbolSize: 60, //全局节点尺寸
          itemStyle: {  // 给节点加上阴影，显着立体
            shadowColor: '#C0C0C0',
            shadowOffsetX: 2,
            shadowOffsetY: 2
          },
          //让节点可以通过鼠标拖拽和移动的设置
          roam: true, //开启鼠标平移及缩放
          draggable: true, //节点是否支持鼠标拖拽。
          edgeSymbol: ['circle', 'line'],//两节点连线的样式
          edgeSymbolSize: [5, 10],
          cursor: 'pointer', //鼠标悬浮时在图形元素上时鼠标的样式
          labelLayout: {
            moveOverlap: 'shiftX', //标签重叠时，挪动标签防止重叠
            draggable: true //节点标签是否允许鼠标拖拽定位
          },
          emphasis: {
            scale: true, //节点放大效果
            focus: 'adjacency'
          },
          lineStyle: {
            color: '#3d3d3f',
            width: 2,
            curveness: 0 //节点连线的曲率，0-1 越大越弯。
          },
          // edgeLabel:{
          //   // normal:{
          //     show: true,
          //     // textStyle: {
          //     fontSize: 10,
          //     width: 100,
          //     overflow: 'break',
          //       // backgroundColor: '#000000',
          //     // },
          //     formatter: function (x) {
          //       return x.data.name;
          //     }
          //
          //   // }
          // },
          data: [],
          links: [],
        }
      ]
    })
    function rendeChart() {
      const myeChart = proxy.$echarts.init(proxy.$refs.echart2)
      myeChart.setOption(option)
    }
    return {
      ...toRefs(option)
    }
  },

}
</script>

<style scoped>

</style>
